<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
	
	#slide{
		width:600px; height:300px; background:red;
	}
</style>
</head>

<body>

<script type="text/javascript">
	$(function(){
		<!--初始化-->
		$('#img').attr('src',$('#slide .ctrl a:first').attr('lang'));
		
	
		$.extend({
			autoChange:function(){
				next = $('#slide .ctrl .selected').next();
				
				if(next.size()==0){
					next = $('#slide .ctrl a:first');
				}
				$('#img').css('display','none').attr('src',next.attr('lang')).fadeIn();
				$('#slide .ctrl a').removeClass('selected');
				next.addClass('selected');
			}
		})
		setInterval("$.autoChange()",5000);
		
		
		$('#slide .ctrl a').click(function(){
			$('#img').css('display','none').attr('src',$(this).attr('lang')).fadeIn();
			$('#slide .ctrl a').removeClass('selected');
			$(this).addClass('selected');
		},
		function(){})
	})
</script>


<div id="slide">
	<div class="img">
    	<img src="#"/>
    </div>
    <div class="btns">
    	<a href="#" lang="red">1</a>
    	<a href="#" lang="blue">2</a>
    	<a href="#" lang="gray">3</a>
    	<a href="#" lang="yellow">4</a>
    </div>
</div>


</body>
</html>
